import { useEffect } from 'react'
import { useSelector } from '@/redux/index.ts'
import globalTheme from '@/styles/theme.ts'

/**
 * @description: 配置系统主题
 */
const useSystemTheme = () => {
  const { isDarkMode } = useSelector((state) => state.global)

  // 切换暗黑模式
  useEffect(() => {
    const themeMode = isDarkMode ? 'dark' : 'light'
    Object.entries(globalTheme[themeMode]).forEach(([key, value]) => {
      document.documentElement.style.setProperty(key, value)
    })
  }, [isDarkMode])
}

export default useSystemTheme
